<template>
  <Page name="额度申请">
    <!-- <div slot="title"></div> -->
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="apply">
      <div class="header">
        <p @click="showActionSheet=true">
          <span>调整币种账户</span>
          <span><!-- 人民币账户 -->
            <span :class="{'empty':!form.currency_code}">{{form.currency_text || '请选择'}}{{form.currency_text!="" ? "账户" : ""}}</span>
            <i class="arrow-right"></i>
          </span>
        </p>
        <ul>
          <li>
            <span>现有额度:</span>
            <span>{{data.total_amount==""?'0.00':data.total_amount | toFixed}}</span>
          </li>
          <li>
            <span>最高可调整至:</span>
            <span>{{data.max_amount==""?'0.00':data.max_amount | toFixed}}</span>
          </li>
        </ul>
      </div>
      <div class="amount" >
        <h4>调整至</h4>
        <div class="form-group">
          <input type="text" v-model="form.apply_amount" @input="check(true)" placeholder="请输入想要调整至的额度" @focus="active=true" >
          <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear"
              v-if="form.apply_amount.length!=0"
              @click="form.apply_amount=''">
        </div>
        <p><img src="~/assets/img/tip-yellow.png" alt=""> 以最终审核为准</p>
      </div>
      <div class="reasson" >
        <h4>申请原因</h4>
        <div class="form-group">
          <textarea  v-model="form.reasson" @input="check(false)" placeholder="请输入调整的理由"></textarea>
        </div>
      </div>
      <div class="btn-wrap">
        <button class="btn btn-block btn-primary submit" :disabled="disabled" @click="submit($event)">确认申请</button>
      </div>
      <ActionSheet
      v-if="showActionSheet"
      title="选择调整币种账户"
      :list="currencys"
      :value="form.currency_code"
      @close="showActionSheet = false"
      @select="selectCurrency"
      />
    </div>
  </Page>
</template>

<script>
  import Page from '~/components/page';
  import UILoading from "~/components/loading";
  import popup from "~/components/common/popup";
  import ActionSheet from '~/components/ActionSheet'
  export default {
    components: {
      Page,
      [UILoading.name]: UILoading,
      [popup.name]: popup,
      ActionSheet,
    },
    async asyncData({store}){
      await store.dispatch('accept/checkWallets');
      return {
        userInfo: store.state.accept.userInfo,
        wallets:store.state.accept.wallets,
        currencys: store.state.currencys.map(item=>{
          return {
            value:item.code,
            label:item.name
          }
        })
      }
    },
    data() {
      return {
        initLoading: true,
        popType: '',
        popInfo: {
            title: "",
            content: ""
        },
        popup: {
            status: false
        },
        form:{
          apply_amount:"",
          reasson:"",
          currency_code:"",
          currency_text:""
        },

        disabled:true,
        data:{},
        showActionSheet:false,
      }
    },
    filters:{
      toFixed(value){
        if(isNaN(value)){
          return value;
        }else{
          return Number(value).toFixed(2)
        }
      },
    },
    mounted() {
      (async () => {
        await this.getDate();
      })();

      let code = this.$utils.getUrlKey("code");
      let currencys = this.$store.state.currencys;
      if(code==null || currencys==undefined) return false;
      currencys.forEach(item => {
        if(item.code==code){
          this.form.currency_code = item.code;
          this.form.currency_text = item.name;
        }
      });
    },
    methods: {
      check(flag){
        if(this.form.apply_amount!="" && this.form.reasson!="" && this.form.currency_text !="" ){
          this.disabled = false;
        }else{
          this.disabled = true;
        }

        if(flag){
          this.form.apply_amount =this.form.apply_amount.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
          this.form.apply_amount =this.form.apply_amount.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
          this.form.apply_amount =this.form.apply_amount.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
          this.form.apply_amount =this.form.apply_amount.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
          if(this.form.apply_amount.indexOf(".")< 0 &&this.form.apply_amount !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
              this.form.apply_amount= parseFloat(this.form.apply_amount);
          }
        }

      },
      async getDate() {
        let params = {};
        if(this.form.currency_code){
          params.currency_code = this.form.currency_code
        }else if(this.$utils.getUrlKey("code")){
          params.currency_code = this.$utils.getUrlKey("code")
        }
        let { data: rs } = await this.$axios.post('?ct=api&ac=get_apply_data',params)
        if (rs.code == 0) {
          this.data = rs.data;
          this.initLoading = false;
        } else {
          this.$toast(rs.msg);
          this.initLoading = false;
          setTimeout(()=>{
            window.history.go(-1);
          },1000)

        }
      },
      async submit() {
        let params = {
          currency_code:this.form.currency_code,
          apply_amount:this.form.apply_amount,
          reasson:this.form.reasson,
        }
        if(this.form.currency_code==""){
          this.$toast("请选择币种账户");
          return false;
        }
        if(this.form.apply_amount==""){
          this.$toast("请输入调整额度");
          return false;
        }
        if(this.form.reasson==""){
          this.$toast("请输入申请原因");
          return false;
        }
        let { data: rs } = await this.$axios.post('?ct=api&ac=apply',params)
        if (rs.code == 0) {
          this.$toast(rs.msg);
          window.history.go(-1);
        } else {
          this.$toast(rs.msg);
          window.history.go(-1);
        }
      },
      async selectCurrency(item){ // 切换币种获取该币种的最大提现额度
        this.form.currency_code = item.value;
        this.form.currency_text = item.label;

        await this.getDate();
        this.check();
      },
    },

  }
</script>

<style lang="less" scoped>
.apply{
  .header{
    background: #fff;
    margin-top:20px;
    padding:0 30px;
    p{
      line-height: 100px;
      font-size:30px;
      border-bottom:1px solid #ededed;
      span:last-child{
        float: right;
        i{
          background: url("~assets/img/jiantou_right.png") no-repeat left center;
          width:10px;
          height:18px;
          display: inline-block;
          background-size:100%;
        }
      }
    }
    ul{
      line-height: 100px;
      overflow: hidden;
      li{
        float: left;
        width:50%;
        span{
          font-size:24px;
          color:#999;

          &:last-child{
            color:#999;
            font-weight: 500;
          }
        }
      }
    }
  }
  .amount{
    background: #fff;
    padding:0 30px;
    margin-top:20px;
    .form-group{
      position: relative;
      .clear{
        width:30px;
        height:30px;
        position: absolute;
        right:30px;
        top:50px;
      }
    }
    h4{
      line-height: 80px;
      font-size:30px;
      font-weight: normal;
    }
    p{
      color:#d39b00;
      line-height: 80px;
      border-top:1px solid #ededed;
      font-size:28px;
      padding-bottom:20px;
      padding-top:20px;
      img{
        width:30px;
        height:30px;
        vertical-align: middle;
      }
    }
    div{
      padding:20px 0;
      font-size:60px;
      width: 100%;
      overflow: hidden;
      input{
        font-size:60px;
        width: 100%;
      }
      input::-webkit-input-placeholder {
       font-size: 30px;
      }
    }
  }
  .reasson{
    background: #fff;
    padding:0 30px;
    margin-top:20px;
    h4{
      line-height: 80px;
      font-size:30px;
      font-weight: normal;
    }
    textarea{
      width:100%;
      height:200px;
      font-size:30px;
      border: none;
      box-shadow: none;
    }
  }
  .btn-wrap{
    padding:30px 30px;
    margin-top:30px;
  }
}
.exit-pop {
    top: 40%;
    width: 600px;
    height: 280px;
    .exit-content {
        margin-top: 60px;
        text-align: center;
        p {
            margin-top: 40px;
            font-size: 36px;
            color: #282828;
        }
    }
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        a {
            display: inline-block;
            width: 50%;
            padding: 30px 0;
            text-align: center;
            font-size: 36px;
            border-top: 1px solid #e2e2e2;
            color: #2086f9;
            &:first-child {

                border-right: 1px solid #e2e2e2;
            }
        }
    }
}
</style>
